<template>
  <div class="container">
    <h5>加载中</h5>
    <canvas id="canvas" width="540" height="960">Canvas画板</canvas>
  </div>
</template>

<script>
    import Game from '../assets/js/Game'
    function setContentSize (argument) {
      let canvas=document.getElementById('canvas');
      let clientWidth = document.documentElement.clientWidth;
      let clientHeight = document.documentElement.clientHeight;
      let canvasWidth = Math.floor(clientWidth);
      let canvasHeight = Math.floor(clientHeight);
      canvas.setAttribute('width',canvasWidth+'px');
      canvas.setAttribute('height',canvasHeight+'px');
    }
    window.onload = setContentSize;
    window.onresize = setContentSize;
    export default {
        name: 'canvastest',
        data() {
            return {}
        },
        mounted() {
          let game=new Game('canvas');
        },
        methods:{
        }
    }
//    class Draw {
//      constructor(el) {
//        this.el = el
//        this.canvas = document.getElementById(this.el)
//        this.cxt = this.canvas.getContext('2d')
//        this.stage_info = canvas.getBoundingClientRect()
//        this.path = {
//          beginX: 0,
//          beginY: 0,
//          endX: 0,
//          endY: 0
//        }
//      }
//      init(btn) {
//        var that = this;
//
//        this.canvas.addEventListener('touchstart', function(event) {
//          document.addEventListener('touchstart', preHandler, false);
//          that.drawBegin(event)
//        })
//        this.canvas.addEventListener('touchend', function(event) {
//          document.addEventListener('touchend', preHandler, false);
//          that.drawEnd()
//
//        })
//        this.clear(btn)
//      }
//      drawBegin(e) {
//        var that = this;
//        window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
//        this.cxt.strokeStyle = "#000"
//        this.cxt.beginPath()
//        this.cxt.moveTo(
//          e.changedTouches[0].clientX - this.stage_info.left,
//          e.changedTouches[0].clientY - this.stage_info.top
//        )
//        this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
//        this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
//        canvas.addEventListener("touchmove",function(){
//          that.drawing(event)
//        })
//      }
//      drawing(e) {
//        this.cxt.lineTo(
//          e.changedTouches[0].clientX - this.stage_info.left,
//          e.changedTouches[0].clientY - this.stage_info.top
//        )
//        this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
//        this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
//        this.cxt.stroke()
//      }
//      drawEnd() {
//        document.removeEventListener('touchstart', preHandler, false);
//        document.removeEventListener('touchend', preHandler, false);
//        document.removeEventListener('touchmove', preHandler, false);
//        //canvas.ontouchmove = canvas.ontouchend = null
//      }
//      clear(btn) {
//        this.cxt.clearRect(0, 0, 300, 600)
//      }
//      save(){
//        return canvas.toDataURL("image/png")
//      }
//    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 { font-weight: normal; }
  ul { list-style-type: none; padding: 0; }
  li { display: inline-block; margin: 0 10px; }
  a { color: #42b983; }
  #canvas {
    background: #ffffff;
    cursor: default;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }
  #keyword-box { margin: 10px 0; }
</style>
